//1. 引入gulp依赖
const gulp = require('gulp')

//1-1-1. 引入gulp-cssmin依赖    用来压缩css代码的
const cssmin = require('gulp-cssmin')

//1-1-2. 引入gulp-autoprefixer依赖  用来给css自动添加前缀使用的
const autoprefixer = require('gulp-autoprefixer')

//1-1.  	引入gulp-sass依赖
const sass = require('gulp-sass')

//1-1-3. 一个打包css文件的处理函数
const cssHandler = () =>
	gulp
		.src('./src/sass/*.scss') //  找到所有的scss文件
		.pipe(sass())		//	把sass代码转换成为css代码
		.pipe(autoprefixer()) //css代码自动添加前缀
		.pipe(cssmin()) //压缩css代码
		.pipe(gulp.dest('./dist/css')) //压缩完毕的css代码放在dist目录下面的css文件夹里面

//1-2-1. 引入gulp-uglify依赖    用来压缩js代码，不认识es6语法
const uglify = require('gulp-uglify')

//1-2-2. 引入gulp-babel依赖     专门用来把 es6 转换成 es5 使用的
const babel = require('gulp-babel')

//1-2-3. 一个打包js文件的处理函数
const jsHandler = () =>
	gulp
		.src('./src/js/*.js')
		.pipe(
			babel({
				presets: ['@babel/env']
			})
		) //转码成为es5代码
		.pipe(uglify()) //压缩
		.pipe(gulp.dest('./dist/js')) //压缩完毕的js代码放在dist目录下面的js文件夹里面

//1-3-1. 引入gulp-htmlmin依赖       用来压缩 html 文件的
const htmlmin = require('gulp-htmlmin')

//1-3-2. 一个打包html文件的函数
const htmlHandler = () =>
	gulp
		.src('./src/pages/*.html')
		.pipe(
			htmlmin({
				removeAttributeQuotes: true, // 去掉属性上的双引号
				removeComments: true, // 移除注释
				collapseBooleanAttributes: true, // 把值为布尔值的属性简写
				collapseWhitespace: true, // 移除所有空格
				minifyCSS: true, // 把style 标签里面的 css 样式去空格
				minifyJS: true // 把script 标签里面的 js 代码去空格
			})
		)
		.pipe(gulp.dest('./dist/pages'))

//1-4. 一个移动image文件的方法
const imgHandler = () =>
	gulp.src('./src/images/**').pipe(gulp.dest('./dist/images'))

//1-5. 一个移动lib文件的方法
const libHandler = () => gulp.src('./src/lib/**').pipe(gulp.dest('./dist/lib'))

//移动php文件
const phpHandler = () => gulp.src('./src/php/**').pipe(gulp.dest('./dist/php'))

//1-6-1. 引入del依赖
const del = require('del')

//1-6-2. 写一个任务，自动删除dist目录
const delHandler = () => del(['./dist'])

//1-7-1. 引入gulp-webserver依赖
const webserver = require('gulp-webserver')

//1-7-2. 写一个配置服务器的任务
const serverHandler = () =>
	gulp
		.src('./dist') //把次文件夹当做网站根目录
		.pipe(
			webserver({
				host: 'qfwww.io', //域名，自己定义
				port: 3100, //端口号
				open: './pages/index.html', //默认打开的首页
				livereload: true, //自动刷新浏览器
				proxies: [
					// 每一个代理配置就是一个对象
					{
						source: '/login', // 源, 你的代理标识符
						// 你直接请求下面这个地址压根也拿不到东西, 因为跨域了
						target: 'http://dklxiaomi.io/dist/php/login.php' // 目标, 你要代理的地址
					},
					{
						source: '/register', // 源, 你的代理标识符
						// 你直接请求下面这个地址压根也拿不到东西, 因为跨域了
						target: 'http://dklxiaomi.io/dist/php/register.php' // 目标, 你要代理的地址
					},
					{
						source: '/shop',
						target: 'http://dklxiaomi.io/dist/php/shop.php'
					},
					{
						source: '/cart',
						target: 'http://dklxiaomi.io/dist/php/cart.php'
					},
					{
						source: '/send',
						target: 'http://dklxiaomi.io/dist/php/send.php'
					}
				]
			})
		)

//1-8. 自动监控文件
const watchHandler = () => {
	gulp.watch('./src/sass/*.scss', cssHandler)
	gulp.watch('./src/js/*.js', jsHandler)
	gulp.watch('./src/pages/*.html', htmlHandler)
	gulp.watch('./src/lib/**', libHandler)
	gulp.watch('./src/images/**', imgHandler)
	gulp.watch('./src/php/**', phpHandler)
}

//1-9. 写一个默认任务
module.exports.default = gulp.series(
	delHandler, //应该在压缩 css/js/html 之前先把 dist 目录删除了
	gulp.parallel(cssHandler, jsHandler, htmlHandler, imgHandler, libHandler, phpHandler), //执行 css/js/html/... 之类的压缩转移任务
	serverHandler,
	watchHandler
)

//2. 导出
// module.exports.css = cssHandler
// module.exports.js = jsHandler
// module.exports.html = htmlHandler
// module.exports.img = imgHandler
// module.exports.lib = libHandler
